<template>
	<view class="index-box" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.themeColor1 }" v-if="orderInfo.pk_id">
		<!-- 商品信息 -->
		<view class="data-list">
			<view class="data-item u-flex u-border-bottom">
				<view class="di-img"><image :src="orderInfo.detailed[prodIndex].product_img" mode="aspectFill"></image></view>
				<view class="di-r">
					<view class="di-title u-line-2">{{ orderInfo.detailed[prodIndex].product_name || '' }}</view>
					<view class="di-price mt-auto">
						<text class="u-font-24">￥</text>
						<text class="u-font-36 fw-bold">{{ orderInfo.detailed[prodIndex].price }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="rate-box">
			<view class="rb-title u-font-28">商品评价</view>
			<u-rate v-model="params.level" active-color="#FF8B2E" size="42" gutter="25"></u-rate>
		</view>
		<!-- 输入框 -->
		<textarea
			class="text-box"
			v-model="params.content"
			name="remark"
			placeholder-style="color:#999"
			placeholder="有没有想说点什么？快告诉我们吧"
			auto-height
			:maxlength="600">
		</textarea>
		<view class="upload_box"><upload-img length="9" v-model="params.img"></upload-img></view>
		<view class="glo_bot_main">
			<view class="glo_bot_fix"><view @click="onSubmit" class="glo_button" :style="{ background: vuex_config.themeColor1 }">立即评价</view></view>
		</view>
	</view>
</template>
<script>
import { uniBack } from '@/utils/uniPromise';
import uploadImg from '@/components/upload/index.vue';
export default {
	data() {
		return {
			orderInfo: {},
			prodIndex: 0,
			params: {
				img: '',
				content: '',
				level: 5
			},
			btnState: true
		};
	},
	components: { uploadImg },
	onLoad: function(options) {
		this.initPage(options);
	},
	methods: {
		//初始化页面
		initPage(options) {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2].$vm; //上一个页面
			this.orderInfo = {
				...prevPage.orderInfo
			}
			this.prodIndex = Number(options.index)
			// let eventChannel = this.getOpenerEventChannel();
			// eventChannel.once('acceptParams', res => {
			// this.prodIndex = res.index
			// 	this.orderInfo = res.item;
			// });
		},
		//提交
		onSubmit() {
			if (this.btnState) {
				if (!this.params.content) {
					this.$toast('请输入评论内容');
					return;
				}
				this.$loading();
				this.$u.debounce(
					() => {
						let params = {
							...this.params,
							product_id: this.orderInfo.detailed[this.prodIndex].product_id,
							type: this.orderInfo.type,
							order_id: this.orderInfo.pk_id
						};
						this.btnState = false;
						this.$loading('正在提交');
						this.$resPost('SetProductComment', params)
							.then(() => {
								this.$hide();
								this.$toast('提交成功');
								uniBack(1000);
							})
							.catch(() => {
								this.$toast('提交失败');
								this.btnState = true;
							});
					},
					500,
					true
				);
			}
		}
	}
};
</script>
<style lang="scss">
page {
	background: $www-theme-bg;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #f3f3f3;
}
.data-item {
	width: 100%;
	background-color: #ffffff;
	padding: 30rpx 24rpx;
	height: 260rpx;
}
.data-item:last-of-type:after {
	width: 0 !important;
}
.di-t {
	width: 100%;
	height: 83rpx;
	border-bottom: 1rpx solid rgba(227, 225, 225, 1);
}
.di-img {
	width: 200rpx;
	height: 200rpx;
	margin-right: 24rpx;
}
.di-img > image {
	border-radius: 16rpx;
}
.di-r {
	flex: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.di-title {
		padding-top: 12rpx;
	}
	.di-price {
		color: var(--price);
		margin-bottom: 20rpx;
	}
}
.rate-box {
	// width: calc(100% - 48rpx);
	// border-radius: 16rpx;
	// margin: 0 auto;
	// height: 120rpx;
	background: rgba(255, 255, 255, 1);
	padding: 0 24rpx 22rpx;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f5f5f5;
	.rb-title {
		margin-right: 40rpx;
		color: #000;
	}
}
.text-box {
	padding: 20rpx 24rpx 40rpx;
	width: 100%;
	background-color: #ffffff;
	min-height: 200rpx;
	border-radius: 16rpx;
	padding: 24rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}
.upload_box {
	background-color: #fff;
	padding: 40rpx 24rpx;
}
</style>
